<template>
  <div>
    <table>
      <caption>欢迎光临水果店</caption>
<tr><th>苹果 {{jq}}￥/斤，打 {{zk}}折</th> </tr>
<tr><th>请输入您要购买的斤数 <input type="text" v-model.number="number" placeholder="0"></th> </tr>
<tr><th><button @click="btn">结账买单</button></th> </tr>
<tr><th>结账单：总价:{{zj}}元，折后加:{{zh}} 元，省了:{{sj}}元</th> </tr>
</table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      number: 0,
      jq: 10,
      zk: 8,
      zj: 0,
      zh: 0,
      sj: 0
    }
  },

  created () {

  },

  methods: {
    btn () {
      this.zj = 10 * this.number
      this.zh = this.zj * (this.zk / 10)
      this.sj = this.zj - this.zh
    }
  }
}
</script>

<style scoped lang='less'>
div {
  table{
    width: 500px;
    height: 98px;
    caption{
      height: 20px;
    }
    tr th{
   border: 1px solid #000;
height: 19px;
    }
  }
}
</style>
